<template>
	<div class="service">
		<van-nav-bar title="套餐" left-arrow @click-left="back" />
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
			<div class="service_list">
				<div class="lists">
					<div @click="toDetail(item)" class="home_service__item flex" v-for="(item ,index) in dataList" :key="index">
						<div class="bg" :class="['type1']" :style="{backgroundImage:`url(${item.titleImgUri})`}"></div>
						<div class="infor">
							<h4 class="name">{{item.packageName}}</h4>
							<p class="descp" v-html="item.introduction"></p>
							<p class="num row-between-center ">
								<span class="price">{{item.packagePrice}}</span>
								<!-- <span class="salenum">已售{{item.sellNum}}份</span> -->
							</p>
						</div>
					</div>
				</div>
			</div>
		</van-list>
	</div>
</template>

<script>
	import api from 'api/api'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				active: 0,
				loading: false,
				finished: false,
				form: {
					page: 0,
				},
				dataList: [],
				pages: 0
			}
		},
		computed: {
			...mapState(['categoryList'])
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				// if (!this.finished && !this.loading) {
					this.form.page++
					this.loading = true;
					api.goodsPackage(this.form).then(res => {
						console.log(res.data)
						this.loading = false;
						this.dataList = this.dataList.concat(res.data.records)
						this.pages = res.data.pages
						console.log(this.form.page, this.total)
						if (this.form.page > this.pages - 1) {
							console.log(this.finished)
							this.finished = true
						}
					})
				// }
			},
			tabChange() {
				console.log(this.active)
				this.dataList = []
				this.form.data.page = 0
				this.loading = false
				this.finished = false
				this.getList()
			},
			toDetail(item) {
				console.log(item.id)
				this.$router.push('/packageDetail/'+'package/' + item.id)
			},
			back() {
				window.history.go(-1)
			}
		}
	}
</script>

<style lang="scss">
	.service {
		.van-tabs__line {
			background-color: #348aff;
		}

		.service_list {
			padding: 0.3rem;

			.lists {
				.home_service__item {
					width: 6.9rem;
					height: 1.87rem;
					margin-bottom: 0.21rem;
					box-shadow: #eee 0.02rem 0.02rem 0.1rem;

					.bg {
						width: 1.87rem;
						height: 1.87rem;
						background-size: cover;
						background-position: center;
					}

					.infor {
						width: 5.02rem;
						text-align: left;
						padding: 0 0.2rem;

						.name {
							font-size: 0.38rem;
							padding: 0.3rem 0 0.2rem;
							line-height: 1;
						}

						.descp {
							font-size: 0.22rem;
							color: #666;
							margin-bottom: 0.21rem;
							line-height: 1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.num {
							.price {
								font-size: 0.28rem;
								color: #ff344c;

								small {
									font-size: 0.22rem;
									color: #999;
									margin-left: 0.1rem;
									text-decoration: line-through;
								}
							}

							.salenum {
								font-size: 0.22rem;
								color: #999;
							}
						}
					}
				}
			}
		}
	}
</style>
